<template>
  <div class="article-container">

    <h1 class="article-title">{{ article.title }}</h1>

  
    <div class="article-meta">
      <span class="author">作者：{{ user.username || "匿名"}}</span>
      <span class="publish-time">发布时间：{{ article.date }}</span>
    </div>


    <img  v-if="article.image_info!=undefined&&article.image_info.length>0"  :src="article.image_info[0]" alt="文章封面" class="article-cover" />


    <div class="article-content">
        {{ article.text }}
    </div>

   
    <div v-if="article.image_info!=undefined && article.image_info.length > 0" class="image-gallery">
      <img v-for="(image, index) in article.image_info" :key="index" :src="image"
       :alt="'文章图片 ' + (index + 1)" 
       class="gallery-image" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref,inject ,computed} from 'vue';
import { useRoute } from 'vue-router';
let route=useRoute()
let userstore = inject('user')()
const user=computed(() => {
  return userstore.value.get_user()
})
let article = ref({
  title: "标题",
  author: "张三",
  date: "2023-10-01",
  Images: "", // 封面图片占位符
  content: [
    { text: "Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它易于上手，同时功能强大，适合构建单页面应用（SPA）。" },
    { text: "Flexbox 是一种 CSS 布局模型，能够轻松实现复杂的布局，特别是在响应式设计中非常有用。" },
    { text: "本文将介绍如何使用 Vue.js 和 Flexbox 实现一个简单的文章详情页面。" },
    { text: "首先，我们需要创建一个 Vue 组件，然后使用 Flexbox 进行布局。" },
    { text: "这是二级缩进的段落。", nested: true },
  ],
}

)

const get_default_data_byid = (data, uid)=> {
        console.log("获取数据", data, uid)
        return data.filter((item) => 
                 item.life_data_id == uid)
}
onMounted(async () => { 
   article.value = userstore.value.get_user_life_data(get_default_data_byid, route.query.id)[0]
})

</script>

<style scoped>
/* 容器样式 */
.article-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* 文章标题样式 */
.article-title {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

/* 文章元信息样式 */
.article-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #666;
}

/* 文章封面图片样式 */
.article-cover {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 8px;
}

/* 文章内容样式 */
.article-content {
  line-height: 1.6;
  font-size: 1rem;
  color: #444;
  text-indent: 2em;
}

/* 图片画廊样式 */
.image-gallery {
  margin-top: 20px;
}

.gallery-image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 8px;
}
</style>